<template>
    <view class="glo-choice" :style="{ width: size + 'rpx', height: size + 'rpx' }" @click="handleClick">
        <image :src="xuan ? '/static/imgs/ic_danxuan_1.png' : '/static/imgs/ic_danxuan_2.png'"
            :style="{ width: size + 'rpx', height: size + 'rpx', display: 'block' }">
        </image>
    </view>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
    modelValue: {
        type: Boolean,
    },
    size: {
        type: String,
        default: '23'
    },
    selected: {
        type: Boolean,
    }
})
const xuan = ref(props.modelValue || props.selected)
watch(() => props.selected, (newVal, oldVal) => {
    xuan.value = newVal
})
const emit = defineEmits(['update:modelValue'])
const handleClick = () => {
    emit('update:modelValue', !props.modelValue)
}
</script>